<template>
  <h3>命名视图(Named Views) + 路由(Route) 演示</h3>
  <ul>
    <li>
      <router-link to="/namedviews/home">First page</router-link>
    </li>
    <li>
      <router-link to="/namedviews/other">Second page</router-link>
    </li>
  </ul>
  <div class="routerview">在组件中放置顶级路由所指向的router-view是不起作用的.
    <!-- <router-view></router-view>
    <router-view class="view one" name="one"></router-view>
    <router-view class="view two" name="two"></router-view>
    <router-view class="view three" name="three"></router-view> -->
  </div>
  <hr>
  <p>
    注意:<br>
    1. 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。<br>
    2. 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)。<br>
    3. 当然, 直接用组件的嵌套也是可以的, 可能还更方便。<br>
    官方文档: <a href="https://router.vuejs.org/zh/guide/essentials/named-views.html"><b>命名视图</b></a>
  </p>
</template>

<style scoped>
ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li:not(:last-of-type) {
  margin-right: 1rem;
}

.router-link-active {
  font-weight: bold;
  color: skyblue;
}

.router-link-exact-active {
  color: crimson;
}

.routerview{
  background-color: palegoldenrod;
  margin-top: 5px;
}
</style>